import React, { Component } from 'react'
// import { shopcarlist, delcar, changecar, exitflag, checkall } from '../api/index'
import { shopcarlist, delcar, changecar} from '../api/index'
import { ActionBar } from 'react-vant';
// import { Toast } from 'antd-mobile'

// import { SwipeCell, Button, Flex, Image, Typography, Stepper, Dialog } from 'react-vant';
import { SwipeCell, Button, Flex, Image, Typography, Dialog } from 'react-vant';
import axios from 'axios';

// import { createHashHistory } from 'history' 
// //返回上一页这段代码、
// const history = createHashHistory();
export default class Car extends Component {
    //返回上一页这段代码
    //  goBackPage = () => {
    //     history.goBack();  
    //   }

    state = {
        shoplist: [],
        total: 0,
        ifflag: 0,
        // truelist: []
    }

    componentDidMount() {
        this.getlist()
    }

    getlist = async () => {
        let res = await shopcarlist()
        this.setState({
            shoplist: res.data.data,
        })
    }

    //到支付页面

    payment = (total) => {
        // this.props.history.push('/payment')
        // Toast.show({
        //     icon: 'loading',
        //     content: '加载中…',
        // })
        // ali({params:{total:this.state.total}}).then(res => {
        //     window.location.href = res.data
        // })
        axios({
            url:'/api/ali',
            method:'post',
            data:{
                total:total
            }
        }).then(res => {
            window.location.href = res.data
        })
    }

    //删除
    Delcar = (i, id) => {
        Dialog.confirm({
            title: '删除',
            message: '确认删除吗',
        })
            .then(() => {
                let shoplist = [...this.state.shoplist];

                shoplist.splice(i, 1)
                this.setState({
                    shoplist: shoplist
                })
                this.totalcom()
                delcar({ id })
            })
            .catch(() => {
                // on cancel
            });
    };

    //减
    mulNum(i, id) {
        let shoplist = [...this.state.shoplist]
        shoplist[i].num--;
        if (shoplist[i].num <= 1) {
            shoplist[i].num = 1
        }
        this.setState({
            shoplist: shoplist
        })
        this.totalcom()
        changecar({ value: shoplist[i].num, id })
    }
    //加
    addNum(i, id) {
        let shoplist = [...this.state.shoplist]
        shoplist[i].num++;
        this.setState({
            shoplist: shoplist
        })
        this.totalcom()
        changecar({ value: shoplist[i].num, id })
    }

    //单选
    flag = async (i) => {
        let shoplist = [...this.state.shoplist]
        shoplist[i].flag = !shoplist[i].flag;
        let ifflag = this.state.ifflag;
        let tag = shoplist.every((item) => { return item.flag })
        ifflag = tag;
        this.setState({
            shoplist: shoplist,
            ifflag: ifflag
        })
        this.totalcom()
    };

    //全选
    allflag = () => {
        let shoplist = [...this.state.shoplist]
        let ifflag = !this.state.ifflag
        shoplist.map((item) => item.flag = ifflag)
        console.log(shoplist);

        this.setState({
            shoplist: shoplist,
            ifflag: ifflag
        })
        this.totalcom()
    };

    //计算总价
    totalcom = () => {
        const turelist = this.state.shoplist.filter((item) => item.flag === true);
        const all = turelist.reduce((a, b) => {
            return (a += b.num * b.price);
        }, 0);
        this.setState({
            total: all
        })
    };

    render() {
        const { shoplist } = this.state

        return (
            // <div>
            //     <button onClick={this.goBackPage}>返回</button>
            //     购物车
            // </div>
            <div className='car'>
                <div className='car_header'>
                    <p onClick={() => { this.props.history.goBack() }}>&lt;&nbsp;返回</p>
                    <p>购物车</p>
                    <p></p>
                </div>
                <div className='car_main'>
                    {
                        shoplist?.map((item, idx) => {
                            return <SwipeCell
                                key={idx}
                                rightAction={
                                    <Button style={{ height: '100%' }} square type="danger" onClick={() => this.Delcar(idx, item.id)}>
                                        删除
                                    </Button>
                                }
                            >

                                <input type="checkbox" checked={item.flag} onChange={() => { this.flag(idx) }} />
                                <Flex className="demo-card" align="stretch">
                                    <Image src={item.img} className="demo-card__img" />
                                    <Flex direction="column" justify="between" className="demo-card__content">
                                        <Typography.Title level={5}>{item.title}</Typography.Title>

                                        <div className='btn_box'>
                                            <Button className='button1' type="info" onClick={() => { this.mulNum(idx, item.id) }}>-</Button><span className='btn_num'>{item.num}</span>
                                            <Button className='button1' type="info" onClick={() => { this.addNum(idx, item.id) }}>+</Button>

                                        </div>
                                        <Flex justify="between" align="center">
                                            <Typography.Text strong size="lg">
                                                ¥{item.price}
                                            </Typography.Text>
                                            <Typography.Text size="sm" type="secondary">
                                                X{item.num}
                                            </Typography.Text>
                                        </Flex>
                                    </Flex>
                                </Flex>
                            </SwipeCell>
                        })
                    }
                </div>
                <div className='car_footer'>
                    <span>
                        <input
                            type="checkbox" checked={this.state.ifflag} onChange={() => { this.allflag() }} />全选</span>
                    <span>总价:{this.state.total}</span>
                    <span>
                        <ActionBar.Button type="danger" text="提交订单" onClick={() => { this.payment(this.state.total) }} />
                    </span>
                </div>
            </div>
        )
    }
}
